import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { observer, inject } from "mobx-react";
@inject("sheetStore")
@observer
class GxlTableHeaderCell extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: false,
      height: "2rem",
      width: "5rem",
      left: 0,
      top: 0,
    };
  }
  componentDidMount() {
    var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();
    this.setState({
      left: rect.x,
      top: rect.y,
    });
  }
  
  getStyle() {
    const { height, width, left, top } = this.state;
    const { cell,rowLeft,sheetStore } = this.props;
    const currentSheet = sheetStore.getCurrentSheet();
    const style = { height, width };
    if(currentSheet.fixedCellIndex && cell <= currentSheet.fixedCellIndex){
      style.position='sticky'
      style.left=left-(rowLeft||0)
      style.top=0
      style.zIndex=4
      if(cell==currentSheet.fixedCellIndex){
        style.boxShadow="1px 0px 0px 0px #999"
        style.borderRight=0
      }
    }
    return style;
  }
  render() {
    const { cell,indexChar } = this.props;
    return (
      <div className="gxl-table-header-cell" style={this.getStyle()}>
        {indexChar}
      </div>
    );
  }
}

export default GxlTableHeaderCell;
